﻿<!DOCTYPE html>
<!--隐患排查内容管理编辑-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <link href="../static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="../static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        body {
            padding-bottom: 10px;
        }

        .vue-treeselect_style .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>
</head>

<body>
    <el-col id="app" v-cloak class="popupW100">
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" size="mini" label-position="right">


            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Unit+mark.m" class="inputTextarea">
                        {{Form.Unit}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Objective+mark.m" class="inputTextarea">
                        {{Form.Objective}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.PersonInCharge+mark.m" class="inputTextarea">
                        {{formatter(Form.PersonInCharge)}}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Participant+mark.m" class="inputTextarea">
                        {{formatter(Form.Participant)}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Requirements+mark.m" class="inputTextarea">
                        {{Form.Requirements}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Content+mark.m" class="inputTextarea">
                        {{Form.Content}}
                    </el-form-item>
                </el-col>
            </el-row>


            <!--ListItem.tableHeight   :row-key="getRowKeys"-->
            <el-table ref="table" @current-change="tableHandleCurrentChange" class="tb-edit" :data="ListItem.tableData"
                :height="400" border row-style="height:10px" style="width: 100%;margin:0 auto;margin-bottom:20px;">
                <el-table-column prop="Project" :label="RisksManagement.RiskContent.id" width="50">
                    <template slot-scope="props">
                        {{props.$index + 1}}
                    </template>
                </el-table-column>
                <!-- <el-table-column type="selection" style="padding-top: 0px;padding-bottom: 0px;" align="center"
                    width="55" :reserve-selection="true">
                </el-table-column> -->
                <el-table-column prop="AddClass" :label="RisksManagement.RiskContent.AddClass">
                </el-table-column>
                <!-- <el-table ref="table" stripe @current-change="tableHandleCurrentChange" class="tb-edit"
                :data="Form.tableData" :row-key="getRowKeys" border @selection-change="handleSelectionChange"
                row-style="height:10px" style="width: 100%;"> -->


                <el-table-column prop="Project" :label="RisksManagement.RiskContent.Project"
                    show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="mini" v-model="scope.row.Project" placeholder="请输入内容">
                        </el-input>
                        <span>{{scope.row.Project}}</span>

                        <!-- <span class="lineMust" v-if="scope.row.Project.length<=0">
                            <img src="/static/images/exclamation.png" alt="">
                        </span> -->
                    </template>
                </el-table-column>
                <el-table-column prop="Region" :formatter="getDicValue" :label="RisksManagement.RiskContent.Region"
                    show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="mini" v-model="scope.row.Region" placeholder="请输入内容">
                        </el-input>
                        <span>{{scope.row.Region}}</span>

                        <span class="lineMust" v-if="scope.row.Region.length<=0">
                            <!-- 必填项添加 -->
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="Remark" :label="RisksManagement.RiskContent.Remark" show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="mini" v-model="scope.row.Remark" placeholder="请输入内容">
                        </el-input>
                        <span>{{scope.row.Remark}}</span>

                        <span class="lineMust" v-if="scope.row.Remark.length<=0">
                            <!-- 必填项添加 -->
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column :label="RisksManagement.RiskContent.Standard" show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="mini" v-model="scope.row.Standard.data" placeholder="请输入内容">

                        </el-input>
                        <span>{{scope.row.Standard.data}}</span>

                        <span class="lineMust" v-if="scope.row.Standard.data.length<=0">
                            <!-- 必填项添加 -->
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="RiskLevel" :label="RisksManagement.RiskContent.RiskLevel"
                    show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="mini" v-model="scope.row.RiskLevel" placeholder="请输入内容">
                        </el-input>
                        <span>{{scope.row.RiskLevel}}</span>

                        <span class="lineMust" v-if="scope.row.RiskLevel.length<=0">
                            <!-- 必填项添加 -->
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </template>
                </el-table-column>

                <el-table-column prop="Result" :label="RisksManagement.RiskContent.Result" width="100">
                    <template scope="scope">
                            <span>{{scope.row.Result}}</span>
                            <el-button v-if="scope.row.Result=='异常'" @click="Report('tj')" type="text" size="small">
                                {{col.btnReport}}
                            </el-button>
                    </template>
                </el-table-column>

                <!-- <el-table-column prop="Result" :label="RisksManagement.RiskContent.Result" show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-select @visible-change="visibleChange" size="mini" v-model="scope.row.Result" slot="suffix" placeholder="请选择">
                            <el-option label="请选择" value=""></el-option>
                            <el-option v-for="item in Result" :label="item.value" :value="item.key">
                            </el-option>
                        </el-select>

                        <span>{{scope.row.Result}}</span>
                        <el-button v-if="scope.row.Result=='异常'" @click="Report('tj')" type="text" size="small">
                            {{col.btnReport}}
                        </el-button>

                    </template>
                </el-table-column> -->




                <!-- 
                <el-table-column prop="Project" :label="RisksManagement.RiskContent.Project">
                </el-table-column>
                <el-table-column prop="Region" :formatter="getDicValue" :label="RisksManagement.RiskContent.Region">
                </el-table-column>
                <el-table-column prop="Remark" :label="RisksManagement.RiskContent.Remark">
                </el-table-column>
                <el-table-column prop="Standard.data" :label="RisksManagement.RiskContent.Standard">
                </el-table-column>
                <el-table-column prop="RiskLevel" :label="RisksManagement.RiskContent.RiskLevel" width="100">
                </el-table-column> -->


            </el-table>
            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <el-dialog :title="dialogTilte" fullscreen="true" :visible.sync="ListItem.dialogVisible" @close='closeDialog'
            width="80%" height="80%" top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>


        <script type="text/javascript">
            Vue.component('treeselect', VueTreeselect.Treeselect)
            app = new Vue({
                el: '#app',
                data: {
                    //父业传参
                    id: '',
                    dialogTilte: '',
                    //业务表单内容
                    //设置频次dialog是否展示
                    //SetFrequencydialogVisible: false,
                    //SetFrequencyInputUrl: '',
                    ListItem: ListItem,
                    mydata: PersonInChargeTree,
                    Region: myTree,
                    Unit: '',
                    Form: {
                        id: guidEmpty,
                        Unit: '',
                        Objective: '',
                        PersonInCharge: null,
                        Participant: null,
                        Requirements: '',
                        Content: '',
                        StandardType: '',
                        InvestigationPost: '',
                        Remark: '',
                        FrequencyText: '',
                        Frequency: '',
                        InputTable: [],
                        TimeS: '2018-04-03',
                        TimeE: '2019-09-10',
                        UpPerson: '李明',
                        status: '完成',
                        Result: '完成',
                    },
                    PersonInCharge: [],
                    Participant: [],
                    StandardType: [],
                    InvestigationPost: [],
                    spanArr: [],
                    //表单验证
                    rules: {
                        //JobSteps: [
                        //    verification.NotNull,
                        //],
                        //Task: [
                        //    verification.NotNull,
                        //],
                        //RiskLevel: [
                        //    verification.NotNull
                        //],
                        //CheckStandard: [
                        //    verification.NotNull,
                        //    { pattern: verification.StringLengthAtoB.t.format(5, 50), message: verification.StringLengthAtoB.m.format(5, 200), trigger: 'blur' }
                        //],
                        //RiskOfViolation: [
                        //    verification.NotNull,
                        //    { pattern: verification.StringLengthAtoB.t.format(5, 50), message: verification.StringLengthAtoB.m.format(5, 200), trigger: 'blur' }
                        //]
                    }
                },
                methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                    AddContent: function (val, id) { DialogShow(this, val, "RiskTaskInputAdd.html", id); },

                    formatter: function (val) {
                        if (val) {
                            if (typeof val === 'string' || typeof val === 'number') {
                                return getTreeValue(this.mydata, val)
                            }
                            else {
                                var result = '';
                                for (var i = 0; i < val.length; i++) {
                                    result += getTreeValue(this.mydata, val[i]) + '，';
                                }
                                result = result.substr(0, result.length - 1);
                                return result;
                            }
                        }
                    },
                    // 行内编辑 js
                    add: function (formName) {
                        if ($('tbody tr').attr("class") == "el-table__row current-row") {
                            showMessage(msg.EditingNotCompleted, 'error');
                        } else {
                            $('.el-table__row').removeClass('current-row');
                            $('.el-table__row span.end').removeClass('xian');
                            $('.el-table__row span.end').addClass('yin');
                            $('.el-table__row span.start').removeClass('yin');
                            $('.el-table__row span.start').addClass('xian');
                            var newObj = {
                                AddClass: '手工',//添加是清空录入数据的，每一项都要有
                                Project: '',//添加是清空录入数据的，每一项都要有
                                Region: '',//添加是清空录入数据的，每一项都要有
                                Remark: '',//添加是清空录入数据的，每一项都要有
                                Standard: { data: '', name: '123', type: '111' },//添加是清空录入数据的，每一项都要有
                                RiskLevel: '',//添加是清空录入数据的，每一项都要有
                                Result: '完成',//添加是清空录入数据的，每一项都要有
                            }
                            var sss = '';
                            this.ListItem.tableData.unshift(newObj);
                            // this.ListItem.tableData[0].Standard.data.unshift(ss);
                            console.log("this.ListItem.tableData", this.ListItem.tableData);
                            setTimeout(function () {
                                $('.el-table__row:eq(0)').addClass('current-row');
                                $('.el-table__row:eq(0) span.end').removeClass('yin');
                                $('.el-table__row:eq(0) span.end').addClass('xian');
                                $('.el-table__row:eq(0) span.start').removeClass('xian');
                                $('.el-table__row:eq(0) span.start').addClass('yin');
                            }, 100);
                        }
                    },
                    //修改
                    Edit: function (val, id, index) {
                        $('.el-table__row').removeClass('current-row');
                        $('.el-table__row:eq(' + index + ')').addClass('current-row');
                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');
                        $('.el-table__row:eq(' + index + ') span.end').removeClass('yin');
                        $('.el-table__row:eq(' + index + ') span.end').addClass('xian');
                        $('.el-table__row:eq(' + index + ') span.start').removeClass('xian');
                        $('.el-table__row:eq(' + index + ') span.start').addClass('yin');
                    },
                    // 保存 注意去掉mock中的parent 否则无法保存
                    Save: function (a, b) {
                        if (!b.Region || !b.Remark || !b.Standard.data || !b.RiskLevel) {
                            showMessage(msg.NoMust, 'error');
                        }
                        else {
                            $('.el-table__row').removeClass('current-row');
                            console.log("a", a);
                            console.log("b", b);
                            $('.el-table__row span.end').removeClass('xian');
                            $('.el-table__row span.end').addClass('yin');
                            $('.el-table__row span.start').removeClass('yin');
                            $('.el-table__row span.start').addClass('xian');
                            //初始化数据
                            // this.GetPageData(1);
                        }
                    },
                    Back: function (a, b) {
                        $('.el-table__row').removeClass('current-row');
                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');
                        //初始化数据
                        // this.GetPageData(1);
                        this.getData();
                        this.ListItem.tableData = this.Form.InputTable;
                    },

                    handblur: function () {
                        //this.$refs.table.setCurrentRow(999);
                        //console.log("c", 'c');
                    },
                    //table选中行handle
                    tableHandleCurrentChange: function (currentRow) {
                        this.currSeelctId = currentRow.id;
                        this.currSeelctCell = currentRow;
                    },
                    //删除列表行
                    deleteRow: function (index, rows) {
                        rows.splice(index, 1);
                    },
                    // 行内编辑 js



                    //排查部门input
                    input: function (value) {
                        this.Form.Unit = value;
                    },
                    //提交数据
                    onSubmitForm: function (formName) {
                        var mythis = this;
                        this.$refs[formName].validate(function (valid) {
                            //验证通过
                            if (valid) {
                                onSubmitForm(this, '/api/RiskTask/Save', mythis.Form);
                            } else {
                                //验证失败
                                return false;
                            }
                        });

                    },
                    //获取input数据
                    getData: function () {
                        getData(this, '/api/RiskTask/get?id=' + this.id);
                        console.log('Form', this.Form)
                    },

                    //表格数据格式化
                    getDicValue: function (row, column, cellValue, index) {
                        switch (column.property) {
                            case "Region":
                                return getTreeValue(this.Region, cellValue)
                                break;
                            case "RiskLevel":
                                return getDicValue('03', cellValue)
                                break;
                            default:
                        }

                    },
                    //列表选择触发
                    handleSelectionChange: function (val) { handleSelectionChange(this, val); },
                    //合并行
                    //删除方法(Comm中没有适配的delete方法，故仿写一份)
                    //（遗留问题2：删除后，合并行方案未更新，导致剩余的新内容合并错误，例：32432，删除第一行后应变为2432，但实际为3243，或32432删除第二行应为3432，但实际依旧是3243
                    //原计划为重新调用合并行方法，但依旧存在问题）
                    //已于20190617修正
                    // onDelete: function () {
                    //     var mythis = this;
                    //     var url = '/api/RiskContent/DeleteInputTable';
                    //     if (mythis.ListItem.tableMultipleSelection.length == 0) {
                    //         showMessage(msg.AtLeastOne, 'error')
                    //         return;
                    //     }
                    //     mythis.$confirm(' 是否确认继续?', '提示', {
                    //         confirmButtonText: '确定',
                    //         cancelButtonText: '取消',
                    //         type: 'warning'
                    //     }).then(function () {
                    //         var delIds = [];
                    //         for (var i = 0; i < mythis.ListItem.tableMultipleSelection.length; i++) {
                    //             var item = mythis.ListItem.tableMultipleSelection[i];
                    //             delIds.push(item.id);
                    //         }
                    //         myAjax("post", mythis, url, delIds, function (response) {
                    //             mythis.getData();
                    //             mythis.ListItem.tableData = mythis.Form.InputTable;
                    //             mythis.getSpanArr(mythis.ListItem.tableData);
                    //             showMessage(msg.OperatingOk, "success");
                    //         });
                    //     }).catch(function () {
                    //         showMessage("已取消删除!");
                    //     });
                    // },
                    //Dialog展示
                    Report: function (val, id) {
                        this.dialogTilte = "上报";
                        //DialogShow(this, val, "RiskContentEditStandardType.html", id);
                        var url = "RiskTaskInputReport.html";
                        if (val == 'tj') {
                            this.ListItem.InputUrl = url + "?pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        } else {
                            this.ListItem.InputUrl = url + "?id=" + id + "&pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        }
                        this.ListItem.dialogVisible = true;
                    },
                    InputInputStand: function (val, id) {
                        this.dialogTilte = "排查项目说明";
                        //DialogShow(this, val, "RiskContentEditStandardType.html", id);
                        var url = "RiskContentEditStandardType.html";
                        if (val == 'tj') {
                            this.ListItem.InputUrl = url + "?pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        } else {
                            this.ListItem.InputUrl = url + "?id=" + id + "&pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        }
                        this.ListItem.dialogVisible = true;
                    },
                    InputInputManagement: function (val, id) {
                        this.dialogTilte = "排查项目说明";
                        //DialogShow(this, val, "RiskContentEditStandardType.html", id);
                        var url = "RiskContentEditStandardTypeManagement.html";
                        if (val == 'tj') {
                            this.ListItem.InputUrl = url + "?pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        } else {
                            this.ListItem.InputUrl = url + "?id=" + id + "&pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        }
                        this.ListItem.dialogVisible = true;
                    },
                    // closeDialog: function () {
                    //     //    this.getData();
                    //     console.log(this.Form)
                    //     console.log(this.Form.InputTable)
                    //     console.log(this.Form.Remark)
                    //     this.ListItem.tableData = this.Form.InputTable;
                    //     this.getSpanArr(this.ListItem.tableData);



                    // },
                },
                mounted: function () {
                    //绑定下拉和tree
                    this.PersonInCharge = fn(this.mydata, "0");
                    this.Participant = fn(this.mydata, "0");
                    this.StandardType = getDicData('59');
                    this.InvestigationPost = getDicData('60');
                    //获取传值id
                    this.id = getUrlParam("id");

                    //读取数据
                    this.getData();
                    //读取数据到表格数据对象
                    this.ListItem.tableData = this.Form.InputTable;


                }
            });
        </script>
</body>

</html>